extends /layout

block declarations
    - additional_title      = lingua.tvshows;
    - body_class            = 'appTv';
    - use_angular           = true;
    - angular_app           = "tvApp";
    - angular_body_ctrl     = "tvCtrl";
    - angular_body_class    = "{playing:playing}";

block additional_css
    link(href="http://vjs.zencdn.net/4.3/video-js.css", rel="stylesheet")
    link(rel='stylesheet', href='/tv/css/style.css')

block additional_scripts
    script(src="/core/js/plugins/angular/angular-ui/ui-bootstrap-tpls-0.11.0.js")
    script(src="/core/js/plugins/jquery/jquery.slimscroll.min.js")
    script(src="/core/js/plugins/video.js")
    script(src="/tv/js/app.js")
    script(src="/core/js/video.js")
    script(src="/tv/js/remote.js")
    script.
        $(function(){
            var isTouch = "ontouchstart" in document.documentElement;
            if(!isTouch){
                $('#inner-playlist').slimScroll({
                    height: '100%'
                });
            }
        });

block body
    header(ng-init="playlist.Visible = true", ng-class="{side: player.playlist.length > 0 && playlist.Visible}")
        h1.pull-left#show-playlist(ng-hide="playlist.Visible")
            i.right.double.angle.icon.pull-left(ng-click="playlist.Visible = true")
        .container
            .row
                .col-md-12
                    a.backlink(href="/",ng-class="{side: player.playlist.length > 0}") &#xe113;
                    h1.hidden-xs #{lingua.tvshows}

                    input#search.pull-right(ng-model="query", type="text", placeholder="#{lingua.tvshows_placeholder_search}",ng-show="tvshows")

    .container-fluid
        .row
            #playlist(ng-show="player.playlist.length > 0 && playlist.Visible", ng-cloak)
                #inner-playlist
                    h2 #{lingua.tvshows_playlist}
                        i.left.double.angle.icon.pull-right(ng-click="playlist.Visible = false")
                    ul
                        li.currentshow(ng-repeat="tvshow in player.playlist", ng-mouseover="changeSelected(tvshow)", ng-class="{current: player.current.tvshow == $index}")
                            .header( ng-click="player.playlist.remove(tvshow); playlist.Visible = false")
                                span.tvshow-title {{tvshow.name}}
                                i.remove.circle.icon
                            ol.episodes
                                li.episode(ng-repeat="episode in tvshow.Episodes  | orderBy: ['season','episode']", ng-class="{current: player.current.episode == $index}", ng-click="playEpisode(episode); playlist.Visible = true") #{lingua.tvshows_season} {{episode.season }} - #{lingua.tvshows_episode} {{episode.episode }}

           ul#tvshows(ng-class="{side: player.playlist.length  > 0  && playlist.Visible}")
               li.tvshow(ng-repeat="tvshow in tvshows | filter:query  | orderBy: 'name'", ng-class="{current: focused == $index}", ng-click="player.playlist.add(tvshow);playlist.Visible = true").col-md-2.col-xs-12
                        i.circular.inverted.edit.icon(ng-click="open(tvshow)")
                        img(ng-src="{{tvshow.posterURL}}")

        h2.loading(ng-show="!tvshows") #{lingua.loading}
            .progress-pie-chart(data-percent="{{serverMessage}}", ng-class="{gt50: serverMessage > 50}", ng-show="serverMessage > 0")
                .ppc-progress
                    .ppc-progress-fill(style="-webkit-transform:rotate({{360*serverMessage/100}}deg); transform:rotate({{360*serverMessage/100}}deg);")
                .ppc-percents
                    .pcc-percents-wrapper
                        span {{serverMessage}}%
            {{serverStatus}}
        h2.loading(ng-show="tvshows.result === 'none'") #{lingua.tvshows_no_data_found}

    video#player.video-js.vjs-default-skin(width="100%", height="100%", ng-show="playing", controls, preload="metadata")

    script(type="text/ng-template", id="editModal.html")
        .modal-header
            h1 #{lingua.tvshows_edit}
        .modal-body
            .form-horizontal
                .row
                    .form-group
                        img.col-md-offset-1(ng-src="{{edit.banner}}")
                    .form-group
                        label.col-md-3.col-md-offset-1 #{lingua.tvshows_edit_banner}
                        input.col-md-7(type="text",name="posterURL",ng-model="edit.posterURL",required,ng-value="current.posterURL")
                    .form-group
                        label.col-md-3.col-md-offset-1 #{lingua.tvshows_edit_title}
                        input.col-md-7(type="text",name="name",ng-model="edit.name",required,ng-value="current.name")
        .modal-footer
            input.btn(type="submit",value="#{lingua.tvshows_edit_submit}", ng-click="editItem()",required)
            button.btn(ng-click="cancel()") #{lingua.tvshows_edit_cancel}
